<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <style>
        img {
            height: 30px;
        }
    </style>
</head>

<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="search" placeholder="昵称/用户名/手机号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </button>

                        <button class="pear-btn pear-btn-md pear-btn-primary" id="add"  lay-submit lay-filter="user-add">
                            <i class="layui-icon layui-icon-add-1"></i>
                            添加用户
                        </button>

                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="user-table" lay-filter="user-table"></table>
        </div>
    </div>
    <script type="text/html" id="user-toolbar">

    </script>
    <script type="text/html" id="user-bar">
        <div class="pear-btn-group">
            <button class="pear-btn pear-btn-sm" lay-event="edit"> <i class="layui-icon layui-icon-edit"></i> 修改 </button>
            <button class="pear-btn pear-btn-sm" lay-event="message"> 消息 </button>
            <button class="pear-btn pear-btn-sm" lay-event="fj"> 封禁 </button>
            <button class="pear-btn pear-btn-sm" lay-event="recharge"> 充值 </button>
        </div>
		</script>

    <script type="text/html" id="avatar-tpl">
            {{# if (d.avatar==""){}}  
            {{# } else { }}  
            <img src="{{d.avatar}}"/>
            {{# } }}  
   </script>
    <script type="text/html" id="sex-tpl">
    {{d.gender==0?"未填写":(d.gender==1?"男":"女")}}
</script>
    <script type="text/html" id="createTime-tpl">
    {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}
</script>

    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script>
        layui.use(['table', 'form', 'jquery'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;

            let cols = [
                [{
                    type: 'checkbox'
                },
                {
                    title: '序号',
                    field: 'id',
                    align: 'center',
                    width: 100
                },
                {
                    title: '昵称',
                    field: 'nickname',
                    align: 'center'
                },
                {
                    title: '用户名',
                    field: 'name',
                    align: 'center',

                },
                {
                    title: '手机号',
                    field: 'mobile',
                    align: 'center',
                },
                {
                    title: '用户ID',
                    field: 'uid',
                    align: 'center',
                },
                {
                    title: '头像',
                    field: 'gname',
                    align: 'center',
                    templet: "#avatar-tpl"
                },
                {
                    title: '性别',
                    field: 'gender',
                    align: 'center',
                    templet: "#sex-tpl"
                },
                {
                    title: '创建时间',
                    field: 'createTime',
                    align: 'center',
                    width: 200,
                    templet: "#createTime-tpl"
                },
                {
                    title: '公司',
                    field: 'company',
                    align: 'center',
                },
                {
                    title: '地址',
                    field: 'address',
                    align: 'center',
                },
                {
                    title: '操作',
                    toolbar: '#user-bar',
                    align: 'center',
                    width: 300
                }
                ]
            ]

            table.render({
                elem: '#user-table',
                url: '/api/user/list',
                page: true,
                cols: cols,
                skin: 'line',
                toolbar: '#user-toolbar',
                defaultToolbar: [{
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports']
            });

            table.on('tool(user-table)', function (obj) {
                if (obj.event === 'edit') {
                    window.edit(obj);
                } else if (obj.event == "fj") {
                    window.fj(obj);
                } else if (obj.event == "message") {
                    window.message(obj);
                } else if (obj.event == "add") {
                    window.add(obj);
                }else if (obj.event == "recharge") {
                    window.recharge(obj);
                }
            });

            table.on('toolbar(user-table)', function (obj) {
                if (obj.event === 'refresh') {
                    window.refresh();
                } else if (obj.event == "batchGet") {
                    window.getUserIds(obj);
                }
            });

            form.on('submit(user-query)', function (data) {
                table.reload('user-table', {
                    where: data.field
                })
                return false;
            });


            form.on('submit(user-add)', function () {
                window.add();
                return false;
            });

            form.on('switch(user-enable)', function (obj) {
                layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
            });

            window.add = function () {
                layer.open({
                    type: 2,
                    title: '添加用户',
                    shade: 0.1,
                    area: ['500px', '500px'],
                    content: 'yhlb_add.html'
                });
            }

            window.edit = function (obj) {
                var data = obj.data;
                layer.open({
                    type: 2,
                    title: '用户编辑',
                    shade: 0.1,
                    area: ['500px', '500px'],
                    content: 'yhlb_edit.html',
                    success: function (layero, index) {
                        var body = layui.layer.getChildFrame('body', index);
                        body.find("input[name='uid']").val(data.uid);
                        body.find("input[name='name']").val(data.name);
                        body.find("input[name='nickname']").val(data.nickname);
                        body.find("input[name='mobile']").val(data.mobile);
                        body.find("input[name='avatar']").val(data.avatar);
                        var select = 'dd[lay-value=' + data.gender + ']';
                        layero.find("iframe")[0].contentWindow.$('#gender')
                            .siblings("div.layui-form-select").find('dl').find(select).click();

                        body.find("input[name='company']").val(data.company);
                        body.find("input[name='address']").val(data.address);

                        form.render();
                    }
                });
            }
            //封禁用户
            window.fj = function (obj) {
                layer.confirm('确定要封禁此用户吗？', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    layer.close(index);
                    console.log(obj.data.uid)
                    let loading = layer.load();
                    $.ajax({
                        url: "/api/user/ban/" + obj.data.uid,
                        dataType: 'json',
                        success: function (result) {
                            layer.close(loading);
                            if (result.msg == "封禁成功") {
                                layer.msg(result.msg, {
                                    icon: 1,
                                    time: 1000
                                }, function () {
                                    table.reload('user-table');
                                });
                            } else {
                                layer.msg(result.msg, {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        }
                    })
                });
            }

            //发送消息

            window.message = function (obj) {
                var data = obj.data;
                layer.open({
                    type: 2,
                    title: '发送消息',
                    shade: 0.1,
                    area: ['500px', '190px'],
                    content: 'yhlb_msg.html',
                    success: function (layero, index) {
                        var body = layui.layer.getChildFrame('body', index);
                        body.find("input[name='target']").val(data.uid);
                        form.render();
                    }
                });
            }

            window.recharge = function(obj){
                var data = obj.data;
                layer.open({
                    type: 2,
                    title: '余额充值',
                    shade: 0.1,
                    area: ['400px', '250px'],
                    content: 'recharge.html',
                    success: function (layero, index) {
                        var body = layui.layer.getChildFrame('body', index);
                        body.find("input[name='userId']").val(data.uid);
                        form.render();
                    }
                });
            }

            window.refresh = function (param) {
                table.reload('user-table');
            }
        })


    </script>
</body>

</html>